<template>
    <div class="server-data">
        <div class="base-box">
            <div class="history-box">
                <v-container>
                    <v-row justify="space-around">
                        <v-card width="600">
                            <v-img
                                    height="200px"
                                    src="../../assets/bee.png"
                            >
                                <v-app-bar
                                        flat
                                        color="rgba(0, 0, 0, 0)"
                                >
                                    <v-app-bar-nav-icon color="white"></v-app-bar-nav-icon>

                                    <v-toolbar-title class="title white--text pl-0">
                                        服务器创建史
                                    </v-toolbar-title>

                                    <v-spacer></v-spacer>

                                    <v-btn
                                            color="white"
                                            icon
                                    >
                                        <v-icon>mdi-dots-vertical</v-icon>
                                    </v-btn>
                                </v-app-bar>

                                <v-card-title class="white--text mt-8">
                                    <v-avatar size="56">
                                        <img
                                                alt="user"
                                                src="../../assets/control.png"
                                        >
                                    </v-avatar>
                                    <p class="ml-3">
                                        Wetcland
                                    </p>
                                </v-card-title>
                            </v-img>

                            <v-card-text>
                                <div class="font-weight-bold ml-8 mb-2">
                                    Today
                                </div>

                                <v-timeline
                                        align-top
                                        dense
                                >
                                    <v-timeline-item
                                            v-for="message in messages"
                                            :key="message.time"
                                            :color="message.color"
                                            small
                                    >
                                        <div>
                                            <div class="font-weight-normal">
                                                <strong>{{ message.from }}</strong> @{{ message.time }}
                                            </div>
                                            <div>{{ message.message }}</div>
                                        </div>
                                    </v-timeline-item>
                                </v-timeline>
                            </v-card-text>
                        </v-card>
                    </v-row>
                </v-container>
            </div>
            <div class="show-box">
                <template>
                    <v-card
                            class="mx-auto"
                            color="#26c6da"
                            dark
                            max-width="400"
                    >
                        <v-card-title>
                            <v-icon
                                    large
                                    left
                            >
                                mdi-message-text
                            </v-icon>
                            <span class="title font-weight-light">基本数据</span>
                        </v-card-title>

                        <v-card-text class="headline font-weight-bold">
                            服务器当前已注册玩家数量: {{playerCount}}
                        </v-card-text>

                        <v-card-actions>
                            <v-list-item class="grow">
                                <v-list-item-avatar color="grey darken-3">
                                    <v-img
                                            class="elevation-6"
                                            alt=""
                                            src="../../assets/control.png"
                                    ></v-img>
                                </v-list-item-avatar>

                                <v-list-item-content>
                                    <v-list-item-title>Wetcland</v-list-item-title>
                                </v-list-item-content>

                                <v-row
                                        align="center"
                                        justify="end"
                                >
                                    <v-icon class="mr-1">
                                        mdi-heart
                                    </v-icon>
                                    <span class="subheading mr-2">-</span>
                                    <span class="mr-1">·</span>
                                    <v-icon class="mr-1">
                                        mdi-share-variant
                                    </v-icon>
                                    <span class="subheading">-</span>
                                </v-row>
                            </v-list-item>
                        </v-card-actions>
                    </v-card>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import Ajax from '../../Ajax'
    export default {
        name: "ServerData",
        data: () => ({
            messages: [
                {
                    from: '正式开放',
                    message: '开放',
                    time: '尚未确立',
                    color: 'deep-purple lighten-1',
                },
                {
                    from: '测试阶段',
                    message: '测试修复BUG',
                    time: '2021年2月',
                    color: 'green',
                },
                {
                    from: '开发阶段',
                    message: '开发TCSP插件(基于Spigot)，网站后台(SpringBoot + MySql + JPA)，PC端网站(Vue全家桶 + Vuetify + ViewUI)，移动端网站(UNI-APP)',
                    time: '2020年12月',
                    color: 'green',
                },
                {
                    from: '启动计划',
                    message: `确立计划`,
                    time: '2020年',
                    color: 'deep-purple lighten-1',
                },
            ],
            playerCount: 0
        }),
        mounted() {
            this.getPlayerCount()
        },
        methods: {
            getPlayerCount() {
                Ajax.post("account/getPlayerCount").then(res => {
                    if (res.data.code == 200) {
                        this.playerCount = res.data.count
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .server-data {
        .base-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            .history-box {
                flex: 1;
            }
            .show-box {
                flex: 1;
            }
        }
    }
</style>
